<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->

    <style>
        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 阻止表单默认提交  -> JS提交(自己设置验证规则 => 全都成功之后在提交) -->
    <form class="box" onsubmit="return false">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </form>
</body>

<script>
    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];


    // 1T = 1024G
    // 1G = 1024M
    // 1M = 1024K
    // 1K = 1024B (byte)
   
    
    var btn = document.getElementsByClassName("btn")[0];


    userInp.onblur = function(){
        var user = userInp.value;
        user = user.replace(/\s/g,"");
        userInp.value = user;


        // console.log(user.length);  // 字符长度 (不管是中文还是英文 一个字符一个长度)
        
        // 字节统计  => 一个英文/数字占一个字节  一个中文占两个  => 合计总的字节数

        // 1. 遍历每一个字符 进行计数
        // var reg = /[\u4e00-\u9fa5]/
        // var count = 0;
        // for(var i=0;i<user.length;i++){
        //     var char = user.charAt(i);
        //     if(reg.test(char)){
        //         count += 2;
        //     }else{
        //         count ++;
        //     }
        // }

        // console.log(count);


        // 2. length 字符长度 (不管是中文还是英文 一个字符一个长度),但是对应字节来说 一个中文占两个 => 一个中文就少算一个 => 有多少个中文就少算多少 => 补回来

        var len = user.length;
        var reg = /[\u4e00-\u9fa5]/g;
        
        var arr = user.match(reg); // 有 => []  没有=>null
        if(arr){
            len += arr.length;
        }
        console.log(len);



    }

  
</script>

</html>